<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="format-detection" content="telephone=no">
    <title>万人群聊 - zutChat万人聊天室</title>

    <!-- Favicon -->
    <link rel="icon" type="image/svg+xml" href="">
    <link rel="apple-touch-icon" href="">

    <link rel="stylesheet" href="css/chat.css">
    <link rel="stylesheet" href="css/admin.css">
    <link rel="stylesheet" href="css/online-users.css">
    <meta name="referrer" content="never"/>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <meta name="referrer" content="never"/>
</head>
<body>
<div class="chat-container">
    <!-- 头部 -->
    <div class="chat-header">
        <div class="header-left">
            <div class="logo-icon">
                <svg width="28" height="28" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <rect width="32" height="32" rx="8" fill="url(#gradient0)"/>
                    <path d="M8 12C8 10.3431 9.34315 9 11 9H21C22.6569 9 24 10.3431 24 12V18C24 19.6569 22.6569 21 21 21H13L9 24V12Z" fill="white" fill-opacity="0.9"/>
                    <circle cx="13" cy="14" r="1.5" fill="#07C160"/>
                    <circle cx="16" cy="14" r="1.5" fill="#07C160"/>
                    <circle cx="19" cy="14" r="1.5" fill="#07C160"/>
                    <defs>
                        <linearGradient id="gradient0" x1="0" y1="0" x2="32" y2="32" gradientUnits="userSpaceOnUse">
                            <stop stop-color="#07C160"/>
                            <stop offset="1" stop-color="#06A84F"/>
                        </linearGradient>
                    </defs>
                </svg>
            </div>
            <h1>zutChat万人聊天室</h1>
        </div>
        <div class="header-right">
            <div class="online-count">
                <i class="fas fa-users"></i>
                <span id="onlineCount">0</span> 人在线
            </div>
            <div class="connection-status" id="connectionStatus">
                <i class="fas fa-circle-notch fa-spin"></i>
                连接中...
            </div>
            <div class="header-buttons">
                <button id="onlineUsersBtn" class="header-btn" title="在线用户列表" onclick="handleOnlineUsersClick(event)">
                    <i class="fas fa-users"></i>
                </button>
                <button id="reconnectBtn" class="header-btn" title="重新连接" style="display: none;">
                    <i class="fas fa-sync-alt"></i>
                </button>
                <button id="fullscreenBtn" class="header-btn" title="全屏/退出全屏">
                    <i class="fas fa-expand"></i>
                </button>
                <button id="exitChatBtn" class="header-btn" title="退出聊天">
                    <i class="fas fa-sign-out-alt"></i>
                </button>
            </div>
        </div>
    </div>

    <!-- 昵称设置模态框 -->
    <div id="nicknameModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2><i class="fas fa-user"></i> 设置昵称</h2>
            </div>
            <div class="modal-body">
                <p>请输入您的昵称开始聊天：</p>
                <input type="text" id="nicknameInput" placeholder="请输入您的昵称..." maxlength="20" required>
                <div class="nickname-tips">
                    <p><i class="fas fa-info-circle"></i> 昵称长度为1-20个字符</p>
                </div>
            </div>
            <div class="modal-footer">
                <button id="joinChatBtn" class="btn btn-primary" disabled>
                    <i class="fas fa-sign-in-alt"></i> 进入聊天室
                </button>
            </div>
        </div>
    </div>

    <!-- 聊天区域 -->
    <div class="chat-main">
        <!-- 消息列表 -->
        <div class="messages-container" id="messagesContainer">
            <div class="messages-list" id="messagesList">
                <!-- 消息将在这里显示 -->
            </div>
        </div>

        <!-- 输入区域 -->
        <div class="input-container">
            <div class="input-wrapper">
                <input type="text" id="messageInput" placeholder="输入消息..." maxlength="500" disabled>
                <button id="imageBtn" class="image-btn" title="发送图片" disabled>
                    <i class="fas fa-image"></i>
                    <input type="file" id="imageInput" accept="image/*" style="display: none;">
                </button>
                <button id="sendBtn" class="send-btn" disabled>
                    <i class="fas fa-paper-plane"></i>
                </button>
            </div>
            <div class="input-footer">
                <div class="button-group">
                    <div class="emoji-btn" onclick="toggleEmojiPanel()">
                        <i class="fas fa-smile"></i>
                    </div>
                    <div class="sticker-btn" onclick="toggleStickerPanel()">
                        <i class="fas fa-images"></i>
                    </div>
                    <div class="gift-btn" onclick="toggleGiftPanel()">
                        <i class="fas fa-gift"></i>
                    </div>
                </div>
                <div class="char-count">
                    <span id="charCount">0</span>/500
                </div>
            </div>
        </div>
    </div>

    <!-- Emoji面板 -->
    <div id="emojiPanel" class="emoji-panel">
        <div class="emoji-grid">
            <span class="emoji" onclick="insertEmoji('😀')">😀</span>
            <span class="emoji" onclick="insertEmoji('😂')">😂</span>
            <span class="emoji" onclick="insertEmoji('😍')">😍</span>
            <span class="emoji" onclick="insertEmoji('🤔')">🤔</span>
            <span class="emoji" onclick="insertEmoji('👍')">👍</span>
            <span class="emoji" onclick="insertEmoji('❤️')">❤️</span>
            <span class="emoji" onclick="insertEmoji('🎉')">🎉</span>
            <span class="emoji" onclick="insertEmoji('🔥')">🔥</span>
            <span class="emoji" onclick="insertEmoji('💯')">💯</span>
            <span class="emoji" onclick="insertEmoji('🚀')">🚀</span>
        </div>
    </div>

    <!-- 表情包面板 -->
    <div id="stickerPanel" class="sticker-panel">
        <div class="sticker-header">
            <h4>表情包</h4>
            <button class="close-btn" onclick="hideStickerPanel()">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <div class="sticker-content">
            <div id="stickerGrid" class="sticker-grid">
                <!-- 表情包将在这里动态加载 -->
            </div>
            <div class="sticker-loading" id="stickerLoading" style="display: none;">
                <i class="fas fa-spinner fa-spin"></i>
                <span>加载中...</span>
            </div>
            <div class="sticker-pagination">
                <button id="prevPageBtn" class="page-btn" onclick="loadPreviousPage()" disabled>
                    <i class="fas fa-chevron-left"></i>
                    上一页
                </button>
                <span id="pageInfo" class="page-info">第1页</span>
                <button id="nextPageBtn" class="page-btn" onclick="loadNextPage()">
                    下一页
                    <i class="fas fa-chevron-right"></i>
                </button>
            </div>
        </div>
    </div>

    <!-- 礼物面板 -->
    <div id="giftPanel" class="gift-panel">
        <div class="gift-header">
            <h4>送礼物</h4>
            <button class="close-btn" onclick="hideGiftPanel()">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <div class="gift-content">
            <div id="giftGrid" class="gift-grid">
                <!-- 礼物将在这里动态加载 -->
            </div>
            <div class="gift-loading" id="giftLoading" style="display: none;">
                <i class="fas fa-spinner fa-spin"></i>
                <span>加载中...</span>
            </div>
        </div>
    </div>
</div>

<!-- 通知容器 -->
<div id="notifications" class="notifications-container"></div>

<!-- 图片预览模态框 -->
<div id="imageModal" class="image-modal">
    <img id="modalImage" src="" alt="预览图片">
</div>

<!-- SockJS客户端库 -->
<script src="https://cdn.jsdelivr.net/npm/sockjs-client@1.6.1/dist/sockjs.min.js"></script>
<!-- SVGA动画库 -->
<script src="https://cdn.jsdelivr.net/npm/svgaplayerweb@2.3.4/build/svga.min.js"></script>
<script src="js/admin.js"></script>
<script src="js/chat.js"></script>
</body>
</html>
